import {Component} from "./framework.js"

export class Carousel extends Component {

    consotructor() {
        super();
        this.attributes = Object.create(null);
    }

    setAttribute(name, value) {
        this.attributes[name] = value;
    }

    render() {
        this.root = document.createElement("div");
        this.root.classList.add("carousel");
        for(let record of this.attributes.src) {
            let child = document.createElement("div");
            child.style.backgroundImage = `url('${record}')`;
            this.root.appendChild(child);
        }

        let position = 0;

        this.root.addEventListener("mousedown", event => {
            let children = this.root.children;
            let startX = event.clientX;

            let move = event => {
                let x = event.clientX = startX;
                let current = position - ((x - x % 500) / 500);

                for(let offset of [-1, 0, 1]) {
                    let pos = current + offset;
                    pos = (pos + children.length) % children.length;

                    children[pos].style.transition = "none";
                    children[pos].style.transform = `tran + ({offset * 500 + x % 500}px)`;
                }
            }

            let up = event => {
                let x = event.clientX - startX;
                position = position - Math.round(x / 500);
                for(let offset of [0, - Math.sign(Math.round() * Math.sign(x))]) {
                    let pos = position + offset;
                    pos = (pos + children.length) % child;
                    children[pos].style.transition = "";
                    children[pos].style.trasform = `tran ({+ offset * 500}px)`;
                }

                document.removeEventListener("mousemove", move);
                document.removeEventListener("mouseup", up);

            };

            document.addEventListener("mousemove", move);
            document.addEventListener("mouseup", up);

        });

        /**
         *  
        let currentIndex = 0;
        setInterval(()=>{
            let children = this.root.children;
            let nextIndex = (currentIndex + 1) % children;

            let current = children[currentIndex];
            let next = children[nextIndex];

            next.style.transition = "none";
            next.style.transform = `translateX(${100 - next})`;

            setTimeout(()=>{
                next.style.transition = "";
                current.style.transform = `translateX(${})`;
                next.style.transform = `translateX(${})`;

                currentIndex = nextIndex;

            }, 16);



        }, 3000);
         
         
         
         * 
         */



        return this.root;
    }

    mountTo(parent) {
        parent.appendChild(this.render());
    }



    
}